<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>User</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/layui/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="allocation">分配资源</a>
</script>

<script src="<%=request.getContextPath()%>/static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="activate" value="{{d.id}}" title="激活" lay-skin="switch" lay-text="on|off"  lay-filter="lockDemo"  {{ d.activate == "on" ? 'checked' : '' }}>
</script>
<script type="text/javascript">
    layui.use('table',function() {
        var table = layui.table,
        form = layui.form;
        var $ = layui.$;
        table.render({
            elem : '#test',
            url : "${pageContext.request.contextPath}/userDate",
            toolbar : 'default',
            title : '角色表',
            cols : [ [
                {type : 'checkbox',fixed : 'left'},
                {field : 'id' , title : 'id',width : 70,edit : 'text'},
                {field : 'username', title :'用户名', edit:'text'},
                {field : 'password', title :'密码', edit:'text'},
                {field : 'activate', templet: '#checkboxTpl', unresize: true, title :'激活'},
                {field : 'remake', title :'备注'},
                {fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
            ] ],
            page:true
            ,response:
                {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.map.data.total, //解析数据长度
                    "data": res.map.data.list//解析数据列表
                };
            }
        });

        form.on('switch(lockDemo)', function(obj){
            var name = "";
            var Message = "";
            if(obj.elem.checked){
                name = "on";
                Message = "激活成功";
            }else {
                name = "off";
                Message = "已锁定"
            }
            var value = "id="+ this.value +"&userActivate="+name;
            $.ajax({
                type:"POST",
                data:value,
                url:"userActivate",
                success:function(data) {
                    layer.tips(Message, obj.othis);
                }
            })
        });

        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data
                ,data1=obj.data; //获取选中的数据

            switch(obj.event){
                case 'add':
                    layer.open({
                        type: 2 //Page层类型
                        ,area: ['600px', '350px']
                        ,title: '编辑'
                        ,shade: 0.6 //遮罩透明度
                        ,maxmin: false //不允许全屏最小化
                        ,anim: 1 //0-6的动画形式，-1不开启
                        ,content: 'userAddView'
                    });
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        //layer.alert('编辑 [id]：'+ checkStatus.data[0].name);
                        Edit(checkStatus.data[0]);
                    }
                    break;
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.confirm('真的删除行么', function(index) {
                            dele(checkStatus.data[0]);

                        });
                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function(index) {
                    dele(data,index,obj);
                });
            } else if (obj.event === 'edit') {
                Edit(data);
            }
            else if(obj.event == 'allocation'){
                allocation(data);
            }
        });
    });
</script>

<script type="text/javascript">
    function Edit(data)
    {
        layer.open({
            type: 2 //Page层类型
            ,area: ['600px', '350px']
            ,title: '编辑'
            ,shade: 0.6 //遮罩透明度
            ,maxmin: false //不允许全屏最小化
            ,anim: 1 //0-6的动画形式，-1不开启
            ,content: 'userEditView'
            ,success: function(layero, index){
                var body = layer.getChildFrame('body', index);
                var iframeWin = window[layero.find('iframe')[0]['name']];
                body.find('#id').val(data.id);
                body.find('#username').val(data.username);
                body.find('#password').val(data.password);
                body.find('#activate').val(data.activate);
                body.find('#remake').val(data.remake);

            }
        });
    }
</script>

<script type="text/javascript">
    function allocation(data){
        var id = data.id;
        layer.open({
            type: 2 //Page层类型
            ,area: ['600px', '350px']
            ,title: '分配资源'
            ,shade: 0.6 //遮罩透明度
            ,maxmin: false //不允许全屏最小化
            ,anim: 1 //0-6的动画形式，-1不开启
            ,content: 'roleCheckView?id='+id
        });
    }

</script>

<script type="text/javascript">
    function dele(data,index,obj)
    {
        var $ =  layui.$;
        var paramenter ="id="+data.id;
        $.ajax({
            type: 'post'
            ,data: paramenter
            ,url:'userDelete'
            ,success: function(data) {
                if (data) {
                    layer.alert("删除成功");
                    obj.del();
                    layer.close(index);
                }
                else{
                    layer.alert("删除失败")
                }
            }
        });
    }
</script>
</body>
</html>